<template>
  <nav class="topnav">
    <div class="container">
        <ul class="fl">
            <li><router-link to="/">首页</router-link></li>
            <li><a href="https://consumer.huawei.com/cn/">华为官网</a></li>
            <li><a href="https://club.huawei.com/">花粉俱乐部</a></li>
            <li><a href="https://club.huawei.com/">V码(优购码)</a></li>
            <li><a href="https://company.vmall.com/#/huawei">企业购</a></li>
            <li><a href="https://www.huaweicloud.com">华为云</a></li>
            <li class="more-container" @mouseenter="isShowCom('moreContainer1', true)"
            @mouseleave="isShowCom('moreContainer1', false)"
            :style="{background: isShowCom('moreContainer1') ? 'white': ''}">
                <a href="javascript:;" :style="{ color: isShowCom('moreContainer1')? 'rgb(222,28,49)':''}">
                更多精彩<i :class="[{'rotate-iconfont': isShowCom('moreContainer1')}, 'iconfont']">&#xe662;</i></a>
                <VmDropdownBar ref="more-container1" @mouseenter="isShowCom('moreContainer1', true)"
                @mouseleave="isShowCom('moreContainer1', false)" 
                v-if="isShowCom('moreContainer1')" width="120px" 
                :position="{bottom:'-146px',left:'-34px'}"
                :colList="moreMarvellousData"/> 
            </li>      
        </ul>
        <ul class="fr">
            <li>
                <a href="https://consumer.huawei.com/cn/" style="padding-right: 10px">请登录</a>
                <a href="https://consumer.huawei.com/cn/">注册</a>
            </li>
            <li><a href="https://consumer.huawei.com/cn/">我的订单</a></li>
            <li class="more-container" @mouseenter="isShowCom('moreContainer2', true)"
            @mouseleave="isShowCom('moreContainer2', false)"
            :style="{background: isShowCom('moreContainer2') ? 'white': ''}">
                <a href="javascript:;" :style="{ color: isShowCom('moreContainer2')? 'rgb(222,28,49)':''}">
                客服<i :class="[{'rotate-iconfont': isShowCom('moreContainer2')}, 'iconfont']">&#xe662;</i></a>
                <VmDropdownBar ref="more-container2" @mouseenter="isShowCom('moreContainer2', true)"
                @mouseleave="isShowCom('moreContainer2', false)" 
                v-if="isShowCom('moreContainer2')" width="120px" 
                :position="{bottom:'-82px',right:'0'}"
                :colList="moreMarvellousData2"/> 
            </li>      
            <li class="more-container" @mouseenter="isShowCom('moreContainer3', true)"
            @mouseleave="isShowCom('moreContainer3', false)"
            :style="{background: isShowCom('moreContainer3') ? 'white': ''}">
                <a href="javascript:;" :style="{ color: isShowCom('moreContainer3')? 'rgb(222,28,49)':''}">
                网站导航<i :class="[{'rotate-iconfont': isShowCom('moreContainer3')}, 'iconfont']">&#xe662;</i></a>
                <VmDropdownBar2 ref="more-container3" @mouseenter="isShowCom('moreContainer3', true)"
                @mouseleave="isShowCom('moreContainer3', false)"
                v-if="isShowCom('moreContainer3')"
                :colList="siteNavList"
                :position="{left:'-809px',bottom:'-210px'}"/>
            </li>
            <li class="more-container nobefore" @mouseenter="isShowCom('moreContainer4', true)"
            @mouseleave="isShowCom('moreContainer4', false)"
            :style="{background: isShowCom('moreContainer4') ? 'white': ''}">
                <a href="javascript:;" :style="{ color: isShowCom('moreContainer4')? 'rgb(222,28,49)':''}">
                手机版<i :class="[{'rotate-iconfont': isShowCom('moreContainer4')}, 'iconfont']">&#xe662;</i></a>
                <VmDropdownBar3 ref="moreContainer4" @mouseenter="isShowCom('moreContainer4', true)"
                @mouseleave="isShowCom('moreContainer4', false)"
                v-if="isShowCom('moreContainer4')"
                :position="{top:'36px',left:'-172px'}"/>
            </li>
            <li class="more-container show-shopping-cart" style="background: rgb(66,66,66);">
                <a href="javascript:;"><b class="iconfont">&#xe655;</b>购物车(0)</a>
                <div class="shopping-cart">
                    <img src="@/assets/images/cart-big.svg" />
                    <span class="text">您的购物车是空的, 赶紧选购吧~</span>
                </div>
            </li>
        </ul>
    </div>
  </nav>
</template>

<script>
import VmDropdownBar from './vm-dropdown-bar/vm-dropdown-bar'
import VmDropdownBar2 from './vm-dropdown-bar/vm-dropdown-bar2'
import VmDropdownBar3 from './vm-dropdown-bar/vm-dropdown-bar3'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'VmNavBar',
  components : { VmDropdownBar, VmDropdownBar2, VmDropdownBar3 },
  setup () {
    const moreConObj = reactive({})
    // 是否展示组件
    const isShowCom = (com,data = null) => {
        if(Object.prototype.hasOwnProperty.call(moreConObj, com)==false) {
            moreConObj[com] = reactive({
                isShow: Boolean
            })
            moreConObj[com].isShow = false // 一开始不展示
        }
        if (data!==null){
            moreConObj[com].isShow = data
            return
        }
        return moreConObj[com].isShow
    }
    
    const getMoreMarvellousObj = (text, href) => {
        return {
            text,
            href
        }
    }
    const moreMarvellousData = ref([
        getMoreMarvellousObj('HarmonyOs', 'https://www.harmonyos.com/'),
        getMoreMarvellousObj('应用市场', 'https://appgallery.huawei.com/Featured'),
        getMoreMarvellousObj('华为终端云空间', 'https://cloud.huawei.com/'),
        getMoreMarvellousObj('开发者联盟', 'https://developer.huawei.com/consumer/cn/')
    ])
    const moreMarvellousData2 = ref([
        getMoreMarvellousObj('服务中心', 'https://www.vmall.com/help/index.html'),
        getMoreMarvellousObj('联系客服', 'https://www.vmall.com/help/index.html')
    ])

    // 网站导航数据提取
    const stroe = useStore()
    const siteNavList = stroe.state.category.siteNavList
    return { isShowCom, moreMarvellousData, moreMarvellousData2, siteNavList}
  }
}
</script>

<style lang="scss" scoped>
i.rotate-iconfont {
    transform: rotate(270deg) !important;
}
.topnav {
    min-height: 36px;
    width: 100%;
    background-color: rgb(0, 0, 0);
    .more-container {
        height: 100%;
        display: flex;
        align-items: center;
        &::before {
            top: 12px;
            right: -1px;
        }
    }
    i {
        margin-left: 8px;
        display: inline-block;
        font-style: normal;
        transform: rotate(90deg) scale(0.8);
    }
    b {
        font-size: 18px;
        display: inline-block;
        margin-right: 5px;
        color: rgba(255, 255, 255, 0.6);
    }
    
    ul {
        display: flex;
        height: 36px;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        li {
            font-size: 12px;
            padding: 0 8px;
            position: relative;
            a {
                color: rgba(255,255,255,0.6);
                line-height: 1;
                display: inline-block;
                &:hover {
                    color: rgba(255,255,255,1);
                }
            }
            &::before {
                content: "";
                width: 1px;
                height: 10px;
                display: block;
                position: absolute;
                top: 4px;
                right: 0;
                background-color: #414141;
            }
            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                padding-right: 10px;
                &::before {
                    display: none;
                }
            }
        }   
    }
}
.shopping-cart {
    display: none;
    background: #fff;
    width: 450px;
    height: 232px;
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 9999999;
    img {
        width: 80px;
        height: 80px;
    }
    .text {
        margin-top: 2%;
        color: rgb(164,164,164);
        font-size: 14px;
        line-height: 32px;
    }
}
.show-shopping-cart {
    &:hover {
        .shopping-cart {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>>
